<template>
  <div class="performance">
    <h1>部门绩效指标</h1>
    <div class="head">
      <h4 style="color: red">非需要勿修改</h4>
    </div>
    <div class="department">
      <div class="research" @click="handleDepartmentClick('研发部')">研发部</div>
      <div class="test" @click="handleDepartmentClick('测试部')">测试部</div>
      <div class="Marketing" @click="handleDepartmentClick('市场部')">市场部</div>
      <div class="BD" @click="handleDepartmentClick('业务部')">业务部</div>
      <div class="HR" @click="handleDepartmentClick('人事部')">人事部</div>
    </div>
    <div class="plot">
      <!-- 左侧绩效标准显示区域 -->
      <div class="plot-left" v-if="selectedDepartment">
        <h2>{{ selectedDepartment }}绩效标准</h2>

        <!-- 编辑状态 -->
        <div v-if="editMode">
          <el-button
              type="success"
              size="small"
              @click="addNewStandard"
              style="margin-bottom: 15px"
          >
            + 新增标准行
          </el-button>
          <el-form label-width="120px">
            <el-form-item
                v-for="(item, index) in performanceForm"
                :key="index"
                :label="item.label || '指标名称'"
            >
              <div class="form-row">
                <el-input
                    v-model="item.label"
                    placeholder="输入指标名称"
                    style="width: 30%; margin-right: 10px"
                ></el-input>
                <el-input
                    v-model="item.value"
                    placeholder="输入指标值"
                    style="width: 50%; margin-right: 10px"
                ></el-input>
                <el-button
                    type="danger"
                    @click="removeStandard(index)"
                    :disabled="performanceForm.length <= 1"
                >
                  删除
                </el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="savePerformanceStandard">保存</el-button>
              <el-button @click="cancelEdit">取消</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 查看状态 -->
        <div v-else>
          <div class="standard-item" v-for="(item, index) in performanceForm" :key="index">
            <strong>{{ item.label }}：</strong>
            <span>{{ item.value }}</span>
          </div>
          <el-button
              type="primary"
              @click="enterEdit"
              style="margin-top: 15px"
          >
            编辑
          </el-button>
        </div>
      </div>

      <!-- 右侧可视化展示区域 -->
      <div class="plot-right">
        <Plot></Plot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'; // 引入 onMounted
import { ElMessage } from 'element-plus';
import Plot from "@/charts/Plot.vue"; // 确保路径正确

// 选中的部门
const selectedDepartment = ref('');
// 绩效标准表单数据（数组形式，支持动态增删）
const performanceForm = reactive([]);
// 原始数据备份（用于取消编辑时恢复）
const originalForm = ref([]);
// 编辑状态
const editMode = ref(false);

// 部门点击事件处理
const handleDepartmentClick = (department) => {
  selectedDepartment.value = department;
  // 从localStorage读取保存的数据，若无则使用默认数据
  const savedData = localStorage.getItem(`performance_${department}`);

  if (savedData) {
    // 恢复保存的数据
    performanceForm.splice(0, performanceForm.length, ...JSON.parse(savedData));
  } else {
    // 设置默认数据（调用外部定义的 setDefaultData）
    setDefaultData(department);
  }
};

onMounted(() => {
  handleDepartmentClick('研发部');
});


const setDefaultData = (department) => {
  const defaultData = {
    '研发部': [
      { label: '业绩指标', value: '完成项目数量≥10个' },
      { label: '效率指标', value: '项目按时交付率≥90%' },
      { label: '质量指标', value: '代码 Bug 率≤5%' }
    ],
    '测试部': [
      { label: '业绩指标', value: '测试用例覆盖率≥95%' },
      { label: '效率指标', value: '缺陷发现率≥80%' },
      { label: '质量指标', value: '缺陷遗漏率≤3%' }
    ],
    '市场部': [
      { label: '业绩指标', value: '新客户获取数≥20个' },
      { label: '效率指标', value: '市场活动 ROI≥1.5' },
      { label: '质量指标', value: '客户满意度≥85分' }
    ],
    '业务部': [
      { label: '业绩指标', value: '销售额≥500万' },
      { label: '效率指标', value: '订单转化率≥20%' },
      { label: '质量指标', value: '客户留存率≥70%' }
    ],
    '人事部': [
      { label: '业绩指标', value: '招聘完成率≥90%' },
      { label: '效率指标', value: '员工培训覆盖率≥80%' },
      { label: '质量指标', value: '员工满意度≥80分' }
    ]
  };

  // 清空并设置新数据
  performanceForm.splice(0, performanceForm.length, ...defaultData[department]);
};

// 进入编辑状态
const enterEdit = () => {
  // 备份当前数据用于取消编辑
  originalForm.value = JSON.parse(JSON.stringify(performanceForm));
  editMode.value = true;
};

// 取消编辑
const cancelEdit = () => {
  // 恢复原始数据
  performanceForm.splice(0, performanceForm.length, ...originalForm.value);
  editMode.value = false;
};

// 新增标准行
const addNewStandard = () => {
  performanceForm.push({ label: '', value: '' });
};

// 删除标准行
const removeStandard = (index) => {
  performanceForm.splice(index, 1);
};

// 保存绩效标准（永久生效）
const savePerformanceStandard = () => {
  // 验证数据完整性
  const invalidItem = performanceForm.find(item => !item.label.trim() || !item.value.trim());
  if (invalidItem) {
    ElMessage.warning('指标名称和值不能为空');
    return;
  }

  // 保存到localStorage（实际项目替换为后端接口）
  localStorage.setItem(
      `performance_${selectedDepartment.value}`,
      JSON.stringify(performanceForm)
  );

  ElMessage.success('绩效标准保存成功');
  editMode.value = false;
};
</script>

<style scoped>
html, body {
  height: 100vh;
  margin: 0;
}

.performance {
  width: 100%;
  height: 95%;
  background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
}

.performance h1 {
  margin: 0 0 20px 0;
  font-size: 24px;
}

/* 头部按钮栏 */
.performance .head {
  width: 100%;
  height: 50px;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 部门容器 */
.performance .department {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px 0;
  box-sizing: border-box;
}

.department > div {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.department > div:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.performance .plot {
  width: 100%;
  height: calc(100% - 50px - 140px);
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  gap: 20px;
}


.plot-left {
  width: 40%;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}


.standard-item {
  margin-bottom: 15px;
  padding: 8px 0;
  border-bottom: 1px dashed #f0f0f0;
}

.standard-item:last-child {
  border-bottom: none;
}

.form-row {
  display: flex;
  align-items: center;
}

.plot-right {
  width: 60%;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


</style>
